{% extends "base.html" %}

{% block extrastyle %}
<link rel="stylesheet" type="text/css" href="/static_media/js/visualize.css">
{% endblock %}

{% block title %}Analytics{% if type %}: {{type}}{% endif %}{% endblock %}
{% block crumb %}&rsaquo; Analytics{% endblock %}

{% block extrahead %}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/static_media/js/visualize.js"></script>
<script type="text/javascript" src="/static_media/js/heatmap.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript">
	function setupChart() {
		chartType = 'bar';
		{% if chartType = 'line' %}
			chartType = 'line';
		{% endif %}
		$('#dataTable').visualize({height:300, type:chartType});
	}
	
	function daysBetween(date1, date2) {
		return Math.floor((date1.getTime() - date2.getTime()) / (1000*60*60*24));
	}
	
	{% if data %}
		$(document).ready(function() {
			var dateFrom = $("#datepickerFrom")
			var dateTo = $("#datepickerTo")
			
			dateFrom.datepicker({
				onSelect: function(dateText, inst) {
					var fromDays = daysBetween(new Date(), new Date(dateText));
					
					var toDate = $("#datepickerTo").datepicker("getDate");
					if(!toDate) toDate = new Date();
					else toDate = new Date(toDate);
					var toDays = daysBetween(new Date(), toDate);
					
					if(fromDays <= 0 || fromDays <= toDays) fromDays = toDays + 1;
					
					location.href="/analytics/{{type}}/?start=" + fromDays + "{% if end %}&end={{end}}{% endif %}";
				}
			});
			
			dateTo.datepicker({
				onSelect: function(dateText, inst) {
					var toDays = daysBetween(new Date(), new Date(dateText));
					
					var fromDate = $("#datepickerFrom").datepicker("getDate");
					fromDate = new Date(fromDate);
					var fromDays = daysBetween(new Date(), fromDate);
					
					if(toDays < 0) toDays = 0;
					if(fromDays <= toDays) toDays = fromDays - 1;
					
					location.href="/analytics/{{type}}/?{% if start %}start={{start}}&{% endif %}end=" + toDays;
				}
			});
			
			dateFrom.datepicker();
			dateTo.datepicker();
			
			dateFrom.datepicker("setDate", -{{start}});
			dateTo.datepicker("setDate", -{{end}});
		});
	{% endif %}
</script>
{% endblock %}

{% block onload %}setupChart();{% endblock %}

{% block content %}
	<div class="checkinNav">
		{% for typeName, typeURL in types %}
			<a href="/analytics/{{typeURL}}{% if typeURL != '' %}{% if start or end %}/?{% endif %}{% if start %}start={{start}}{% endif %}{% if start and end %}&{% endif %}{% if end %}end={{end}}{% endif %}{% endif %}"{% if type = typeURL %}class="selected"{% endif %}>{{typeName}}</a>
		{% endfor %}
	</div>
	
	<!-- We are charting/plotting requested data -->
	{% if data %}
		<div type="text" id="datepickerFrom" class="datepicker"><span class="datepickerHeader">&mdash; FROM &mdash;</span></div>
		<div type="text" id="datepickerTo" class="datepicker"><span class="datepickerHeader">&mdash; TO &mdash;</span></div>
		
		<div class="checkinNav">
			{% for startNum, startLabel in startList %}
				{% if startNum = start and 0 = end %}
					<a href="?start={{startNum}}&end=0" class="selected">{{startLabel}}</a>
				{% else %}
					<a href="?start={{startNum}}&end=0">{{startLabel}}</a>
				{% endif %}
			{% endfor %}
		</div>
		
		<table id="dataTable" class="dataTable">
			<thead>
				<tr>
					{% for heading in data.headings %}
						<th>{{heading}}</th>
					{% endfor %}
				</tr>
			</thead>
			<tbody>
				<tr>
					{% for point in data.points %}
						<td>{{point}}</td>
					{% endfor %}
				</tr>
			</tbody>
		</table>
		
		<div class="analyticsExport">
			<a href="?start={{start}}&end={{end}}&export=yes">Export data to CSV</a>
		</div>
	<!-- We have no data request, so we're presenting an overview -->
	{% else %}
		<h2>Aggregate Check-ins for <span class="blue">All Users</span></h2>
		{% include "analytics/heatmap.html" %}
	{% endif %}
{% endblock %}


